<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/yoyoga.css" media="all"/>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/libs/jquery.min.js"></script>


    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="main-content-container" id="gymList"></div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
<script>
    layui.use('flow', function() {
        var flow = layui.flow;
        flow.load({
            elem: '#gymList', //流加载容器
            scrollElem: '#gymList', //滚动条所在元素，一般不用填，此处只是演示需要。
            done: function(page, next) { //执行下一页的回调
                var lis = [];
                $.ajax({
                    url:"/gym/findAllGyms?page="+page,    //请求的url地址
                    dataType:"json",   //返回格式为json
                    success:function(res){
                        layui.each(res.currentMessage,function (index, item) {
                            lis.push(
                                '<a class="gym-card-info" href="/gym/singleGym?gId='
                                +item.gId
                                +'">'
                                +'<div class="gym-card-info">'
                                +'<div class="gym-card-info-img"><img src="/image/portrait.png" class="gym-card-info-portrait-img"></div>'
                                +'<div class="gym-card-info-intro">'
                                +'<div class="gym-card-info-intro-name">'
                                +item.gName
                                +'</div>'
                                +'<div class="gym-card-info-intro-addr">'
                                +'场馆地址场馆地址数据库里面还没有这个字段'
                                +'</div>'
                                +'<div class="gym-card-info-intro-addr">'
                                +'场馆介绍介绍介绍介绍'
                                +'</div>'
                                +'<div class="gym-card-info-intro-distance">'
                                +'距离2Km'
                                +'</div>'
                                +'</div>'
                                +'</div>'
                                +'</a>'
                                )
                        })
                        next(lis.join(''), page < res.total);
                    }
                });
            }
        });

    });
</script>





</body>

</html>
